<template>
  <div class="bar">
    <router-link to="/home/homepage" tag="li">首页</router-link>
    <router-link to="/home/schoolquery" tag="li">学校查询</router-link>
    <router-link to="/home/professionquery" tag="li">专业查询</router-link>
    <router-link to="/home/recommend" tag="li">智能推荐</router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.bar {
  height: 50px;
  width: 1000px;
  // background-color: red;
  margin: 80px auto 10px;
  // border: 1px solid #ccc;
  display: flex;
  li{
      flex: 1;
      list-style: none;
      text-align: center;
      font-size: 22px;
      line-height: 50px;
      position: relative;
      // border-right: 1px solid #ccc
  }
  li:last-child {
      border-right: none;
  }
  li::before {
    position: absolute;
    content: '';
    top: -30px; 
    left: 184px;
    height: 145px;
    width: 2px ;
    background-color: rgb(12, 137, 204);
    transform: rotateZ(60deg)
  };
  li::after {
    position: absolute;
    content: '';
    top: -30px; 
    left: 58px;
    height: 145px;
    width: 2px ;
    background-color: rgb(36, 189, 16);
    transform: rotateZ(-60deg)
  };
  li:hover{
      cursor: pointer;
      color: orange;
  }
}
.active {
    color: orange;
}
</style>
